<template>
  <!-- 搜索栏 -->
  <a-form layout="inline" style="margin-bottom: 20px">
    <a-form-item label="教室">
      <a-select
          v-model:value="listParam.roomId"
          show-search
          placeholder="请选择教室"
          style="width: 200px"
          :options="roomOptions"
          :filter-option="filterRoomOption"
      ></a-select>
    </a-form-item>
    <a-form-item label="课程">
      <a-select
          v-model:value="listParam.courseId"
          show-search
          placeholder="请选择课程"
          style="width: 200px"
          :options="courseOptions"
          :filter-option="filterCourseOption"
      ></a-select>
    </a-form-item>
    <a-form-item label="教师">
      <a-select
          v-model:value="listParam.teacherId"
          show-search
          placeholder="请选择教师"
          style="width: 200px"
          :options="teacherOptions"
          :filter-option="filterTeacherOption"
      ></a-select>
    </a-form-item>
    <a-button style="margin-right: 15px;">
      <template #icon>
        <search-outlined />
      </template>
      搜索
    </a-button>
    <a-button @click="courseBtn" type="primary">
      <template #icon>
        <plus-outlined />
      </template>
      排课
    </a-button>
  </a-form>
  <!-- 排课界面 -->
  <add-schedule ref="addCourse" @refreshList="refreshList"></add-schedule>
<!-- 课表展示 -->
  <calendar-list ref="refList"></calendar-list>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import useSelect from '@/composable/schedule/useSelect';
import AddSchedule from "@/views/schedule/component/AddSchedule.vue";
import CalendarList from "@/views/schedule/component/CalendarList.vue";
//搜索参数
const listParam = reactive({
  courseId: '',
  roomId: '',
  teacherId: ''
})

const refList = ref()

//下拉属性
const { roomOptions, teacherOptions, courseOptions, filterCourseOption, filterRoomOption, filterTeacherOption } = useSelect()

//排课界面ref属性
const addCourse = ref<{show:()=>void}>();

//排课按钮
const courseBtn = ()=>{
  addCourse.value?.show()
}

const refreshList = () => {
  refList.value.getScheduleList()
}
</script>

<style scoped lang="scss">

</style>
